<template>
	<div :style="{ position: 'absolute', left: left + 'px', top: top + 'px' }">
		<div :style="{ width: size + 'px', height: size + 'px', borderRadius: '50%', backgroundColor: color }" class="circle"></div>
	</div>
</template>

<script>
    export default {
        props: {
            size: {
                type: Number,
                default: 50,
            },
            left: {
                type: Number,
                default: 0,
            },
            top: {
                type: Number,
                default: 0,
            },
            color: {
                type: String,
                default: '',
            },
        },
    };
</script>
<style lang="less" scoped>
	.circle {
		animation-name: circle-move;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-timing-function: ease-in-out;
		position: absolute;
		overflow: hidden;
	}
	
	@keyframes circle-move {
		0% {
			transform: translate(0, 0);
		}
		50% {
			transform: translate(2px, 5px);
		}
		100% {
			transform: translate(0, 0);
		}
	}
</style >
